<template>
  <div>
    <div class="bgc-white">
      <div class="container-width">
        <logo-login-bar />
      </div>
    </div>
    <div class="login-container" :style="'background: url(' + websiteLoginBasemapUrl + ') no-repeat center;'">
      <div class="container-width flex">
        <div class="container-left position-r">
          <img :src="bannerLayerPic" class="banner-layer" alt="">
          <img :src="websiteLoginPicUrl" alt="">
        </div>
        <div class="container-right">
          <div class="login-slider bgc-white">
            <el-tabs v-model="activeName" class="tabs">
              <el-tab-pane label="账号登录" name="phone+password">
                <div class="pad-l-30 pad-r-30 pad-t-27">
                  <div class="pad-b-16">
                    <el-input v-model="user.phone" class="login-input" placeholder="请输入手机号" maxlength="11"
                      @input="user.phone = validUtils.checkInputPositiveNum(user.phone)" @keyup.enter.native="loginEls" />
                  </div>
                  <div class="pad-b-16">
                    <el-input v-model="user.password" type="password" class="login-input" show-password
                      placeholder="请输入密码" @keyup.enter.native="loginEls" />
                  </div>
                  <div class="flex flex-between font-16">
                    <span class="font-color-6 cursor-p">忘记密码？</span>
                    <span class="font-red cursor-p" @click="register">免费注册</span>
                  </div>
                  <div class="height-40" />
                  <el-button class="button" @click="loginEls" :disabled="btnLoginDisabled">{{ btnLoginText }}
                  </el-button>
                </div>
              </el-tab-pane>
              <el-tab-pane label="手机登录" name="phone+code">
                <div class="pad-l-30 pad-r-30 pad-t-27">
                  <div class="pad-b-16">
                    <el-input v-model="user.phone" class="login-input" maxlength="11" placeholder="请输入手机号"
                      @input="user.phone = validUtils.checkInputPositiveNum(user.phone)" @keyup.enter.native="loginEls" />
                  </div>
                  <div class="pad-b-16 position-r">
                    <el-input v-model="user.smsCode" maxlength="6" class="login-input" placeholder="请输入验证码"
                      @input="user.smsCode = validUtils.checkInputPositiveNum(user.smsCode)"
                      @keyup.enter.native="loginEls" />
                    <div class="code-ri">
                      <el-button class="button-code" :loading="codeBtnLoading" :disabled="codeBtnDisabled"
                        @click="getCodeEls">
                        {{ btnTxt }}
                      </el-button>
                    </div>
                  </div>
                  <div class="flex flex-between font-16">
                    <span class="font-color-6 cursor-p">忘记密码？</span>
                    <span class="font-red cursor-p" @click="register">免费注册</span>
                  </div>
                  <div class="height-40" />
                  <el-button class="button" @click="loginEls" :disabled="btnLoginDisabled">{{ btnLoginText }}
                  </el-button>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
    <div class="bgc-white">
      <div class="container-width">
        <footer-links />
      </div>
      <div class="footer-line" />
      <div class="container-width">
        <footer-infos />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onMounted,
    inject
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import logoLoginBar from '@/components/logoLoginBar/index.vue'
  import footerLinks from '@/components/footerLinks/index.vue'
  import footerInfos from '@/components/footerInfos/index.vue'
  import bannerLayerPic from '@/assets/images/login_banner_2_bg.png'
  import bannerPic from '@/assets/images/login_banner_bg.png'
  import defaultBgPic from '@/assets/images/login_bg.jpg'

  import {
    ElMessage
  } from 'element-plus'
  import {
    doSendSms
  } from '@/api/common/common'
  import {
    loginUser
  } from '@/api/loginOrRegister/login'
  import {
    useActions
  } from '@/store/utils/useActions'
  import {
    useState
  } from '@/store/utils/useState'
  export default defineComponent({
    name: 'Index',
    components: {
      logoLoginBar,
      footerLinks,
      footerInfos
    },
    setup() {
      const router = useRouter()
      const validUtils = inject('validUtils')
      const activeName = ref('phone+password')
      const user = ref({
        phone: '',
        smsCode: '',
        password: ''
      })
      let isRegisterLoading = ref(false)
      let codeBtnLoading = ref(false)
      let codeBtnDisabled = ref(false)
      let btnTxt = ref('获取验证码')
      let time = ref(60)

      let btnLoginText = ref('登录')
      let btnLoginDisabled = ref(false)
      const websiteLoginBasemapUrl = ref( < string > '')
      const websiteLoginPicUrl = ref( < string > '')

      const storeActions: any = useActions('user', ['setLoginUserObj'])
      const storeState = useState('enterpriseConfig', ['enterpriseConfig'])
      onMounted(() => {
        websiteLoginBasemapUrl.value = storeState.enterpriseConfig.value.websiteLoginBasemapUrl || defaultBgPic
        websiteLoginPicUrl.value = storeState.enterpriseConfig.value.websiteLoginPicUrl || bannerPic
      })
      const loginEls = () => {
        if (validUtils.isEmpty(user.value.phone)) {
          ElMessage.error('请输入手机号码！')
          return
        }
        if (!validUtils.isValidatePhone(user.value.phone)) {
          ElMessage.error('请输入正确的手机号码！')
          return
        }
        if (activeName.value === 'phone+password') {
          if (!user.value.password) {
            ElMessage.error('请输入密码！')
            return
          }
        } else {
          if (!user.value.smsCode) {
            ElMessage.error('请输入验证码！')
            return
          }
        }
        btnLoginDisabled.value = true
        btnLoginText.value = '登录中...'
        loginUser(user.value).then(response => {
          btnLoginDisabled.value = false
          btnLoginText.value = '登录'
          if (response.isError) return
          //登录成功，需要处理一些缓存的事宜
          storeActions.setLoginUserObj(response.data)
          router.push({
            path: '/'
          })
        })
      }
      const register = () => {
        router.push('/register')
      }
      const getCodeEls = () => {
        if (!user.value.phone) {
          ElMessage.error('请输入手机号码！')
          return
        }
        if (!validUtils.isValidatePhone(user.value.phone)) {
          ElMessage.error('请输入正确的手机号码！')
          return
        }
        codeBtnLoading.value = true
        doSendSms(user.value.phone, 1).then(response => {
          codeBtnLoading.value = false
          if (response.isError) return
          time.value = 60
          timer()
        })
      }
      const timer = () => {
        if (time.value > 0) {
          time.value--
          btnTxt.value = time.value + 's后重新获取'
          codeBtnDisabled.value = true
          setTimeout(timer, 1000)
        } else {
          time.value = 0
          btnTxt.value = '获取验证码'
          codeBtnDisabled.value = false
        }
      }

      return {
        bannerLayerPic,
        bannerPic,
        activeName,
        user,
        loginEls,
        register,
        getCodeEls,
        isRegisterLoading,
        codeBtnLoading,
        codeBtnDisabled,
        btnTxt,
        timer,
        btnLoginDisabled,
        btnLoginText,
        ...storeActions,
        ...storeState,
        defaultBgPic,
        websiteLoginBasemapUrl,
        websiteLoginPicUrl
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;

  .login-container {
    height: 488px;
    background-size: 100% 100% !important;

    .container-left {
      width: 880px;

      .banner-layer {
        position: absolute;
        right: -108px;
        top: 26px;
        z-index: 10;
      }
    }

    .container-right {
      padding-top: 80px;

      .login-slider {
        width: 400px;
        min-height: 350px;

        ::v-deep(.tabs) {
          .el-tabs__nav {
            width: 100%;
            box-sizing: border-box;
            padding: 0 35px;
          }

          .el-tabs__header {
            margin: 0 0 4px 0;
          }

          .el-tabs__item {
            width: 32%;
            margin-right: 18%;
            padding: 0;
            text-align: center;
            color: #666666;
            position: relative;
            height: 60px;
            line-height: 60px;
            font-size: 16px;

            &:last-child {
              margin-left: 18%;
              margin-right: 0;
            }
          }

          .el-tabs__item.is-active {
            color: $darkBlue;
            font-weight: bold;
          }

          .el-tabs__active-bar {
            background-color: $darkBlue;
          }

          .el-tabs__nav-wrap::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 1px;
            height: 17px;
            margin-top: -9px;
            background: #d5d5d5;
          }

          .el-tabs__nav-wrap::after {
            height: 1px;
            background-color: #d5d5d5;
          }
        }

        ::v-deep(.login-input) {
          .el-input__inner {
            border-radius: 0;
            border: #e5e5e5 1px solid;
            height: 45px;
            line-height: 45px;
            padding: 0 13px;
            font-size: 16px;
          }

          ::-webkit-input-placeholder {
            color: #999999;
          }

          ::-moz-placeholder {
            color: #999999;
          }
        }

        ::v-deep(.button) {
          color: #fff;
          background: $darkBlue;
          border-radius: 0;
          border: $darkBlue 1px solid;
          font-size: 18px;
          width: 100%;
        }

        .code-ri {
          position: absolute;
          right: 2px;
          top: 0;
          z-index: 10;
        }

        ::v-deep(.button-code) {
          color: #333;
          background: #f2f2f2;
          border-radius: 0;
          border: #f2f2f2 1px solid;
          font-size: 14px;
          width: 100%;
          padding: 12px 20px;
          min-height: 41px;
          margin-top: 2px;
        }
      }
    }
  }

  .footer-line {
    height: 1px;
    background: #dbdbdb;
    margin: 0 3%;
  }
</style>
